<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      <img :src="slide.image" class="swiper-image" />
    </swiper-slide>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
import { getPCPlateContent } from "@/api";

export default {
  name: "Myswiper5",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      slides: [],
      views:[],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  async created() {
    try {
      const response = await getPCPlateContent();
     this.views = response.result.views || []
      const wheelSeedingList = response.result.views[5].wheelSeedingList;
      this.slides = wheelSeedingList.map((item) => ({
        id: item.id,
        image: item.imgUrl,
        jumpUrl: item.jumpUrl,
      }));
    } catch (error) {
      console.error(error);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../scss/base.scss";
.swiper {
  width: 1200px;
  height: 260px;

  .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .swiper-image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-family: swiper-icons;
    color: #333;
    font-size: 24px;
  }
}
</style>